<template>
  <div class="app-container">
    <div class="form-box">
      <el-form ref="form" :model="form" label-width="140px" :rules="rules">
        <el-tabs type="border-card" class="form-tabs">
          <el-tab-pane
            :label="$t('config.site_settings')"
            class="form-tabs-tab-pane"
          >
            <!-- 站点状态 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.site_status')"
                  prop="site.status"
                >
                  <el-switch v-model="form.site.status" active-value="1" inactive-value="0" />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 站点名称 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.site_name')"
                  prop="site.name"
                >
                  <el-input
                    v-model="form.site.name"
                    :placeholder="$t('common.pleaseFill')+$t('config.site_name')"
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 站点域名 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.site_domain')"
                  prop="site.domain"
                >
                  <el-input
                    v-model="form.site.domain"
                    :placeholder="$t('common.pleaseFill')+$t('config.site_domain')"
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 站点标语 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.site_slogan')"
                  prop="site.slogan"
                >
                  <el-input
                    v-model="form.site.slogan"
                    :placeholder="$t('common.pleaseFill')+$t('config.site_slogan')"
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 站点关键词 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.site_keywords')"
                  prop="site.keywords"
                >
                  <jsp-tags
                    :data="form.site.keywords"
                    :limit="20"
                    @change=" (tags) => form.site.keywords = tags "
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 站点描述 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.site_description')"
                  prop="site.description"
                >
                  <el-input
                    v-model="form.site.description"
                    type="textarea"
                    :placeholder="$t('config.site_description_tips')"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 站点logo -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.site_logo_image')"
                  prop="site.logo_image"
                >
                  <jsp-image-upload
                    :title="$t('config.site_logo_image')"
                    :default-list="site_logo_imageList"
                    :action="fileUploadConfig.imageAction"
                    :headers="fileUploadConfig.headers"
                    :size="Number(fileUploadConfig.allowImageSize)"
                    :accept="fileUploadConfig.allowImageTypeList"
                    @error="(error)=>{error!=null && $message.error(error)}"
                    @change="handleLogoUploadChange"
                  />
                </el-form-item>

              </el-col>
            </el-row>

            <!-- 站点二维码-->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.site_qrcode_image')"
                  prop="site.qrcode_image"
                >
                  <jsp-image-upload
                    :title="$t('config.site_qrcode_image')"
                    :default-list="site_qrcode_imageList"
                    :action="fileUploadConfig.imageAction"
                    :headers="fileUploadConfig.headers"
                    :size="Number(fileUploadConfig.allowImageSize)"
                    :accept="fileUploadConfig.allowImageTypeList"
                    @error="(error)=>{error!=null && $message.error(error)}"
                    @change="handleQrcodeUploadChange"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 公司名称 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.site_company_name')"
                  prop="site.company_name"
                >
                  <el-input
                    v-model="form.site.company_name"
                    :placeholder="$t('config.site_company_name_tips')"
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 公司地址 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.site_company_address')"
                  prop="site.company_address"
                >
                  <el-input
                    v-model="form.site.company_address"
                    type="textarea"
                    :placeholder="$t('config.site_company_address_tips')"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 公司电话 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.site_company_phone_number')"
                  prop="site.company_phone_number"
                >
                  <el-input
                    v-model="form.site.company_phone_number"
                    :placeholder="$t('config.site_company_phone_number_tips')"
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 公司邮箱 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.site_company_email')"
                  prop="site.company_email"
                >
                  <el-input
                    v-model="form.site.company_email"
                    :placeholder="$t('config.site_company_email_tips')"
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 公司传真 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.site_company_fax')"
                  prop="site.company_fax"
                >
                  <el-input
                    v-model="form.site.company_fax"
                    :placeholder="$t('config.site_company_fax_tips')"
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 站点在线客服代码 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.site_online_service_code')"
                  prop="site.online_service_code"
                >
                  <el-input
                    v-model="form.site.online_service_code"
                    type="textarea"
                    :placeholder="$t('config.site_online_service_code_tips')"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 站点统计代码 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.site_statistics_code')"
                  prop="site.statistics_code"
                >
                  <el-input
                    v-model="form.site.statistics_code"
                    type="textarea"
                    :placeholder="$t('config.site_statistics_code_tips')"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 站点版权信息 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.site_copyright')"
                  prop="site.copyright"
                >
                  <el-input
                    v-model="form.site.copyright"
                    type="textarea"
                    :placeholder="$t('config.site_copyright_tips')"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane :label="$t('config.attachment_settings')" class="form-tabs-tab-pane">
            <!-- 上传附件类型 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.attachment_upload_ext')"
                  prop="attachment.attachment_upload_ext"
                >
                  <el-checkbox-group v-model="form.attachment.attachment_upload_ext">
                    <el-checkbox v-for="item in dictionaryService.getItems('attachmentTypeVar')" :key="item.id" :label="item.name" :value="item.value" />
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 上传附件大小 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.attachment_upload_maxsize')"
                  prop="attachment.attachment_upload_maxsize"
                >
                  <el-input-number v-model="form.attachment.attachment_upload_maxsize" :min="0" :placeholder="$t('config.attachment_upload_maxsize_tips')" />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 上传图片附件大小 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.attachment_media_upload_maxsize')"
                  prop="attachment.media_upload_maxsize"
                >
                  <el-input-number v-model="form.attachment.media_upload_maxsize" :min="0" :placeholder="$t('config.attachment_media_upload_maxsize_tips')" />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 上传图片附件大小 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.attachment_image_upload_maxsize')"
                  prop="attachment.image_upload_maxsize"
                >
                  <el-input-number v-model="form.attachment.image_upload_maxsize" :min="0" :placeholder="$t('config.attachment_image_upload_maxsize_tips')" />

                </el-form-item>
              </el-col>
            </el-row>

            <!-- 是否开启图片水印 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.attachment_is_watermark')"
                  prop="attachment.is_watermark"
                >
                  <el-switch v-model="form.attachment.is_watermark" active-value="1" inactive-value="0" />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 水印图片路径 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.attachment_watermark_image')"
                  prop="attachment.watermark_image"
                >
                  <el-input
                    v-model="form.attachment.watermark_image"
                    :placeholder="$t('config.attachment_watermark_image_tips')"
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 满足打水印宽度 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="
                    $t('config.attachment_watermark_condition_width')
                  "
                  prop="attachment.watermark_condition_width"
                >
                  <el-input-number v-model="form.attachment.watermark_condition_width" :min="0" :placeholder="$t('config.attachment_watermark_condition_width_tips')" />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 满足打水印高度 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="
                    $t('config.attachment_watermark_condition_height')
                  "
                  prop="attachment.watermark_condition_height"
                >
                  <el-input-number v-model="form.attachment.watermark_condition_height" :min="0" :placeholder="$t('config.attachment_watermark_condition_height_tips')" />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 水印透明度 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.attachment_watermark_pct')"
                  prop="attachment.watermark_pct"
                >
                  <el-input-number v-model="form.attachment.watermark_pct" :min="0" :placeholder="$t('config.attachment_watermark_pct_tips')" />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 水印位置 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.attachment_watermark_position')"
                  prop="attachment.watermark_position"
                >
                  <el-radio-group v-model="form.attachment.watermark_position">
                    <el-radio v-for="item in dictionaryService.getItems('watermarkPositionVar')" :key="item.id" :label="String(item.value)">{{ item.name }}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane :label="$t('config.login_settings')" class="form-tabs-tab-pane">

            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.login_allow_login')"
                  prop="login.allow_login"
                >
                  <el-switch v-model="form.login.allow_login" active-value="1" inactive-value="0" />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 登录错误次数 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.login_fail_times')"
                  prop="login.fail_times"
                >
                  <el-input-number v-model="form.login.fail_times" :min="0" :placeholder="$t('config.login_fail_times_tips')" />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 登录错误提示语 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.login_fail_times_notice')"
                  prop="login.fail_times_notice"
                >
                  <el-input
                    v-model="form.login.fail_times_notice"
                    :placeholder="$t('config.login_fail_times_notice_tips')"
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row></el-tab-pane>
        </el-tabs>

        <el-row :gutter="20" type="flex" justify="center" class="btn-row">
          <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
            <el-form-item>
              <el-button type="primary" :loading="submitLoading" :disabled="!checkPermission(['admin.config.update'])" @click="onSubmit">{{ $t('common.submit') }}</el-button>
              <el-button @click="onCancel">{{ $t('common.cancel') }}</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import JspImageUpload from '@/components/JspImageUpload'
import JspTags from '@/components/JspTags'
import { mapGetters } from 'vuex'
import { show, update } from '@/api/config'
import { loadingStart } from '@/utils/loading-service'
import checkPermission from '@/utils/permission'

// export
export default {
  name: 'ConfigEdit',
  components: {
    JspImageUpload,
    JspTags
  },
  data() {
    return {
      submitLoading: false,
      form: {
        site: {
          status: '1',
          name: '',
          domain: '',
          slogan: '',
          keywords: [],
          description: '',
          logo_image: '',
          qrcode_image: '',
          copyright: '',
          company_name: '',
          company_address: '',
          company_phone_number: '',
          company_email: '',
          company_fax: '',
          online_service_code: '',
          statistics_code: ''
        },
        attachment: {
          attachment_upload_ext: [],
          attachment_upload_maxsize: '',
          media_upload_maxsize: '',
          image_upload_maxsize: '',
          is_watermark: '0',
          watermark_image: '',
          watermark_condition_width: '',
          watermark_condition_height: '',
          watermark_pct: '',
          watermark_position: 1
        },
        login: {
          fail_times: '',
          fail_times_notice: ''
        }
      },
      // 站点logo: 请求附件接口
      site_logo_imageList: [],
      // 站点二维码: 请求附件接口
      site_qrcode_imageList: [],
      rules: {
      },
      // 路由参数
      routerParams: {}
    }
  },
  computed: {
    ...mapGetters(['fileUploadConfig'])
  },
  created() {
    this.routerParams = this.$route.params
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    checkPermission,
    async getDetail() {
      const loading = loadingStart()
      const response = await show().catch(() => {
        this.closeBack()
      })
      this.form = response.data

      // 站点标志
      this.site_logo_imageList = this.form.site.logo_image
      this.form.site.logo_image = this.form.site.logo_image.map((item) => {
        return item.id
      }).join(',')

      // 站点二维码
      this.site_qrcode_imageList = this.form.site.qrcode_image
      this.form.site.qrcode_image = this.form.site.qrcode_image.map((item) => {
        return item.id
      }).join(',')

      loading.close()
    },
    onSubmit() {
      this.$refs['form'].validate(async(valid) => {
        if (valid) {
          this.submitLoading = true
          await update(this.form).then((response) => {
            this.$message.success(response.message)
          }).catch(() => {})
          this.submitLoading = false
        } else {
          this.$message.error(this.$t('common.pleaseFillRequired'))
          return false
        }
      })
    },
    onCancel() {
      this.closeBack()
    },
    handleLogoUploadChange(result) {
      this.form.site.logo_image = result.ids
    },
    handleQrcodeUploadChange(result) {
      this.form.site.qrcode_image = result.ids
    }
  }
}
</script>

<style scoped lang="scss">
</style>
